<template>
    <div class="container">
        <div class="top" v-show="ok" @click="go">
            <i class="el-icon-arrow-up"></i>
        </div>
    </div>

</template>

<script>
export default {
    name: 'GoTop',
    data() {
        return {
            scrool: 0,
            ok:false
        };
    },
    mounted(){
        window.addEventListener('scroll',this.fn)
    },
    methods: {
        go(){
            window.scrollTo({
                top: 0,
                behavior: "smooth"
            });
        }
    },
    computed: {
        fn() {
            return ()=>{
                this.scrool = window.pageYOffset
                if(this.scrool > 500){
                    this.ok = true
                }else{
                    this.ok = false
                }
            }
        },
    
    },
};
</script>

<style lang="less" scoped>
    .top{
        position: fixed;
        right: 50px;
        bottom: 100px;
        width: 40px;
        height: 40px;
        cursor: pointer;
        border-radius: 50%;
        border: 3px solid black;
        z-index: 99999;
        &>i{
            position: absolute;
            top:3px;
            right:5px;
            font-size: 30px;
        }
        &:hover{
            background: #64bd38;
        }
    }
</style>